<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>预约信息</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.custom-header {
				background-color: #f8f9fa;
				padding: 10px;
				display: flex;
				align-items: center;
			}

			.custom-header .back-icon {
				margin-right: 15px;
			}

			.status-tag {
				background-color: #6c757d;
				color: white;
				padding: 5px 15px;
				border-radius: 5px;
			}

			.section {
				margin: 20px 0;
			}

			.info-item {
				padding: 10px 0;
				border-bottom: 1px solid #dee2e6;
			}

			.info-label {
				width: 120px;
			}

			.fault-image {
				width: 80px;
				height: 80px;
				background-color: #e9ecef;
				margin-right: 10px;
			}

			.fixed-bottom-tool {
				position: fixed;
				bottom: 60px;
				right: 15px;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: white;
				border-top: 1px solid #dee2e6;
				padding: 8px 0;
			}

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				color: #6c757d;
				font-size: 14px;
				padding: 0 15px;
			}

			.nav-item.active {
				color: #007bff;
			}

			.nav-icon {
				font-size: 20px;
				margin-bottom: 3px;
			}

			.custom-header a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="custom-header">
			<a href="YiQuXiao.html"><span class="back-icon">←</span></a>

			<h5 class="mb-0">预约信息</h5>
			<div class="ms-auto">
				<a href="#" class="text-dark"><i class="bi bi-three-dots-vertical"></i></a>
				<a href="#" class="text-dark ms-3"><i class="bi bi-eye"></i></a>
			</div>
		</div>

		<div class="container px-4">
			<div class="row g-3">
				<div class="col-12">
					<div class="d-flex justify-content-between align-items-center mb-3">
						<span>维修单号：AA222222222 <i class="bi bi-file-earmark"></i></span>
						<span class="status-tag">已取消</span>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="card">
					<input type="hidden" id="uid" />
					<input type="hidden" id="wid" />
					<div class="card-body p-0">
						<div class="info-item">
							<span class="info-label">故障位置：</span>
							<span>海鲜区D6-34铺</span>
						</div>
						<div class="info-item">
							<span class="info-label">维修日期：</span>
							<span class="text-warning">2024-3-25</span>
						</div>
						<div class="info-item">
							<span class="info-label">联系人：</span>
							<span>王文州</span>
						</div>
						<div class="info-item">
							<span class="info-label">联系电话：</span>
							<span>13588888888</span>
						</div>
						<div class="info-item">
							<span class="info-label">故障描述：</span>
							<span>门锁坏了无法关上</span>
						</div>
						<div class="info-item">
							<span class="info-label">故障图片：</span>
							<div class="d-flex">
								<div class="fault-image"><i class="bi bi-image"></i></div>
								<div class="fault-image"><i class="bi bi-image"></i></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="card">
					<div class="card-body p-0">
						<h6 class="section-label">取消工单</h6>
						<div class="info-item">
							<span class="info-label">取消原因：</span>
							<span>协商一致取消</span>
						</div>
						<div class="info-item">
							<span class="info-label">提交人：</span>
							<span>冯总</span>
						</div>
						<div class="info-item">
							<span class="info-label">取消日期：</span>
							<span>2024-06-06</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="fixed-bottom-tool">
			<button class="btn btn-light border rounded-pill px-3 py-2">
				工单管理
			</button>
		</div>

		<nav class="bottom-nav">
			<div class="container d-flex justify-content-around">
				<a href="#" class="nav-item">
					<i class="bi bi-house nav-icon"></i>
					首页
				</a>
				<a href="#" class="nav-item active">
					<i class="bi bi-wrench nav-icon"></i>
					报障维修
				</a>
				<a href="#" class="nav-item">
					<i class="bi bi-person nav-icon"></i>
					我的
				</a>
			</div>
		</nav>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/script/YYXXYQX.js"></script>
	</body>
</html>